<template>
   <div class="mainContent">
       <div class="content">
            <div class="top">
                <!-- <Icon type="ios-arrow-back" @click.native.prevent="goBack" style="cursor: pointer" /> -->
                <el-button @click="goBack">返回</el-button>
                <span class="tips">您导出的文件生成后会暂存在云端上，三天后会自动删除。</span>
            </div>
            <div class="bottom">
                <div class="table">
                    <el-table :data="list" :height="tableHeight"  :stripe='true' border>
                        <el-table-column label="序号" width="70px">
                            <template slot-scope="scope">
                                <span>{{pageNum == 1 ? scope.$index+1 : ((pageNum-1) * pageSize) + scope.$index+1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fileName" label="文件名"></el-table-column>
                        <el-table-column prop="fileDesc" label="描述"></el-table-column>
                        <el-table-column prop="fileFormat" label="格式"></el-table-column>
                        <el-table-column prop="postState" label="状态" width="120px">
                            <template slot-scope="scope">
                                <div v-if="scope.row.fileState==0">
                                    <el-tag type="info" size="small">处理中</el-tag>
                                </div>
                                <div v-if="scope.row.fileState==1">
                                    <el-tag type="success" size="small">完成</el-tag>
                                </div>
                                <div v-if="scope.row.fileState == 2">
                                    <el-tag type="info" size="small">已删除</el-tag>
                                </div>
                                <div v-if="scope.row.fileState == -1">
                                    <el-tag type="info" size="small">失败</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间"></el-table-column>
                        <el-table-column fixed="right" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="upDown(scope.$index, list)" type="text" size="small" v-preventReClick="1500" :disabled="scope.row.fileState != 1">下载</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="list.length>0">
                    <div class="float-right">
                        <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                    </div>
                </div>
            </div>
       </div>
   </div>
</template>

<script>
import {getExpList} from '@/api/api'

export default {
    data() {
        return {
            list: [],
            pageNum: 1,
            pageSize: 10,
            totalCount: 0,
            current: 1,
            deptId: "",
            tableHeight: window.innerHeight - 290,
        }
    },
    methods: {
        getAllList() {
            let params = {
                deptId: this.deptId,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
            }
            getExpList(params).then(res => {
                if (res.code == 200) {
                    this.list = res.data.list;
                    this.totalCount = res.data.total;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error)
            })
        },
        upDown(index, rows) {
            window.open(rows[index].fileUrl);
        },
        pageSizeChange(index) {
            this.pageSize = index;
            this.getAllList()
        },
        pageChange(index) {
            this.pageNum = index;
            this.getAllList()
        },
        goBack(){
            this.$router.go(-1);
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldval) {
            if (val.deptId != oldval.deptId) {
                this.projectId = val.deptId;
                this.pageNum = 1;
                this.pageSize = 10;
                this.getAllList()
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getAllList();
    }
}
</script>

<style scoped lang='less' >
    .mainContent {
        width: 100%;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
        background: #f5f5f5;

        .content {
            width: 100%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            border-radius: 10px;
            background: #fff;
            .top {
                font-size: 16px;
                color: #087fdb;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .tips{
                    margin-left: 20px;
                }
            }
            .bottom{
                margin-top: 20px;
            }
        }
    }
</style >
